﻿@using xConnected.Common.ExpertProfile
@{
    ViewBag.Title = "AdvancedSearch";
}
<div class="breadcrumb" style="margin-top: 20px">
    <div class="row-fluid">
        <button class="btn btn-info pull-right" data-bind="click: function(){ $root.profile.resetAdvancedSearch() }">Reset search</button>
    </div>
</div>
<hr/>
<div class="row">
    <div class="span1"><span><strong>Search type</strong></span></div>
    <div class="span3">
        <select style="width: 300px" data-bind="value: $root.searchType">
            <option value="all">Match all criteria</option>
            <option value="some">Match any criteria</option>
        </select>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>@Resources.Keywords</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1050px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.keywordTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeKeywordTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input  data-bind="value: $root.profile.keyword, valueUpdate: 'afterkeydown', executeOnEnter: $root.profile.addKeywordTag" style="border: none; box-shadow: none;" type="text"/>
        </div>
    </div>
</div>
<hr/>
@*<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Countries</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.countryTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeCountryTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="countriesExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllCountries(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>*@
<div class="row" style="margin-bottom: 10px"> 
    <div class="span2"><strong>Countries</strong></div>
    <div class="input-append span10">
        <div class="thumbnail-custom" style="height: 100%; width: 920px; margin-left: 0px;">
          <input data-bind="visible: $root.profile.countryTags().length == 0" id="keywordsExpertsAutocomplete" style="border: none; box-shadow: none; width: 100%;" type="text"/>
            <span class="thumbnails-custom" data-bind="foreach: $root.profile.countryTags">
                <span class="span1" style="width: 100px;">
                    <span class="thumbnail-custom" style="border: none;">
                        <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeCountryTag($data); }">
                            <span data-bind="text: Description"></span> <i class="icon-remove"></i>
                            </a>
                            <input data-bind="visible: $root.profile.countryTags().length != 0" id="countriesExpertsAutocomplete" style="border: none; box-shadow: none; margin-left: 20px;" type="text"/>
                    </span>
                </span>
            </span>
        </div>
        <span class="add-on" style="height: auto; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllCountries(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div data-bind="with: profile">
    <div data-bind="with: profileAdvancedSearch">
        <div class="row">
            <div class="span1"><span><strong>@Resources.Location</strong></span></div>
            <div class="span3"><input type="text" data-bind="value: Location" style="width: 283px"/></div>
        </div>
        <hr/>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Industries</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.industryTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeIndustryTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="industriesExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllIndustries(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Categories</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.categoryTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeCategoryTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="categoriesExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllCategories(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Technologies</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.technologyTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeTechnologyTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="technologiesExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllTechnologies(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Educations</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.educationTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeEducationTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="educationsExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllEducations(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Languages</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.languageTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeLanguageTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="languagesExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllLanguages(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<hr/>
<div data-bind="with: profile">
    <div data-bind="with: profileAdvancedSearch">
        <div class="row">
            <div class="span1"><span><strong>@Resources.Name</strong></span></div>
            <div class="span3"><input type="text" data-bind="value: Title" style="width: 283px"/></div>    
        </div>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Job Types</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="foreach: $root.profile.employmentTypeTags" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeEmploymentTypeTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="employmentTypesExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllEmploymentTypes(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<div data-bind="with: profile">
    <div data-bind="with: profileAdvancedSearch">
        <div class="row" data-bind="visible: $root.profile.ratesSearchVisible">
            <span class="span1"><strong>Rates</strong></span>
        </div>  
        <div class="row" data-bind="visible: $root.profile.hourlyDailyRatesSearchVisible">
            <span class="span1">Hourly rate</span>
            <div class="input-append span1" style="margin-left: 28px; margin-right: 20px">
                <input class="input-mini" data-bind="value: HourRateFrom" type="text" style="text-align: right;" placeholder="From"><span class="add-on"> €</span>
            </div>
            <div class="input-append span1" style="margin-left: 28px">
                <input class="input-mini" data-bind="value: HourRateTo" type="text" style="text-align: right;" placeholder="To"><span class="add-on"> €</span>
            </div>
        </div>
        <div class="row" data-bind="visible: $root.profile.hourlyDailyRatesSearchVisible">
            <span class="span1">Daily rate</span>
            <div class="input-append span1" style="margin-left: 28px; margin-right: 20px">
                <input class="input-mini" data-bind="value: DailyRateFrom" type="text" style="text-align: right;" placeholder="From"><span class="add-on"> €</span>
            </div>
            <div class="input-append span1" style="margin-left: 28px">
                <input class="input-mini" data-bind="value: DailyRateTo" type="text" style="text-align: right;" placeholder="To"><span class="add-on"> €</span>
            </div>
        </div>
        <div class="row" data-bind="visible: $root.profile.monthlyAnnualRatesSearchVisible">
            <span class="span1">Monthly rate</span>
            <div class="input-append span1" style="margin-left: 28px; margin-right: 20px">
                <input class="input-mini" data-bind="value: MonthlyRateFrom" type="text" style="text-align: right;" placeholder="From"><span class="add-on"> €</span>
            </div>
            <div class="input-append span1" style="margin-left: 28px">
                <input class="input-mini" data-bind="value: MonthlyRateTo" type="text" style="text-align: right;" placeholder="To"><span class="add-on"> €</span>
            </div>
        </div>
        <div class="row" data-bind="visible: $root.profile.monthlyAnnualRatesSearchVisible" style="margin-bottom: 10px">
            <span class="span1">Annual rate</span>
            <div class="input-append span1" style="margin-left: 28px; margin-right: 20px">
                <input class="input-mini" data-bind="value: AnnualRateFrom" type="text" style="text-align: right;" placeholder="From"><span class="add-on"> €</span>
            </div>
            <div class="input-append span1" style="margin-left: 28px">
                <input class="input-mini" data-bind="value: AnnualRateTo" type="text" style="text-align: right;" placeholder="To"><span class="add-on"> €</span>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-bottom: 10px"> 
    <div class="span1"><strong>Availability Status</strong></div>
    <div class="input-append span11" style="height: 25px; max-height: 50px">
        <div class="thumbnail span10" style="height: 100%; width: 1020px; margin-left: 0px;">
            <span data-bind="with: $root.profile.availabilityStatusTag" style="margin-right: 5px;">
                <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.profile.removeAvailabilityStatusTag($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
            </span>
            <input id="availabilityStatusesExpertsAutocomplete" style="border: none; box-shadow: none;" type="text"/>
        </div>
        <span class="add-on" style="height: 100%; width: 30px"><a href="#" data-bind="click: function(){ $root.profile.showAllAvailabilityStatuses(); }"><i class="icon-chevron-down" style="margin-top: 5px;"></i></a></span>
    </div>
</div>
<hr/>
<div class="breadcrumb" style="margin-top: 20px">
    <div class="row-fluid">
        <button class="btn btn-info pull-right" data-bind="click: function(){ $root.profile.search() }"><strong>Search</strong></button>
    </div>
</div>